import React, { Component } from 'react'
import {connect} from 'react-redux'
import { fetchBookList } from '../redux/actions/actions'
import Search from '../components/Search'
import Loading from '../components/Loading'
class App extends Component {
  handleSearchBook(searchKeyowrd){
    const { onSearch } = this.props
    onSearch(searchKeyowrd)
  }
  render() {
    return (
      <div className="App">
        <Search
          searchResult={this.props.searchResult}
          onSearch={this.handleSearchBook.bind(this)}
          />
        <Loading
          isShow={this.props.isShow}/>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    searchResult: state.searchResult,
    isShow:state.searchKeyword.isShow
  }
}
const mapDispatchToProps = (dispatch)=>{
  return {
    onSearch:(searchKeyowrd)=>{
      dispatch(fetchBookList(searchKeyowrd))
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(App);
